<template>
	<div class="cart-list table-theme">
		<head-title title="运营--购物车列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="type" @roleType="stateType"></tabs-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
				</div>
			</div>
			<div class="sign-export-view">
				<el-button type="danger" size="small" @click="del">批量删除</el-button>
			</div>
			<el-table :data="List" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" align="center" prop="goods_id"></el-table-column>
				<el-table-column label="商品名" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="尺寸" align="center" prop="size"></el-table-column>
				<el-table-column label="材质" align="center" prop="lining"></el-table-column>
				<el-table-column label="颜色" align="center" prop="color"></el-table-column>
				<el-table-column label="款号" align="center" prop="sku_sn"></el-table-column>
				<el-table-column label="商家名称" align="center" prop="store_name"></el-table-column>
				<el-table-column label="售价" align="center" prop="retail_price"></el-table-column>
				<el-table-column label="数量" align="center" prop="num">
					<template slot-scope="scope">
						<el-input v-model="scope.row.num" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
						 @keyup.enter.native="setNum(scope.row.num, scope.row.cart_id)" @blur="setNum(scope.row.num, scope.row.cart_id)"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="120">
					<template slot-scope="scope">
						<el-button type="danger" size="mini" @click="delCart(scope.row.cart_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import TabsView from '@/components/TabsView'
	export default {
		components: {
			ImgPopover,
			TabsView
		},
		data() {
			return {
				multipleSelection: [],
				List: [], // 列表
				total: 0,totalData: 0, 
				type: '',
				page: 0,
				classifyList: ['全部','平台商品','N98套餐','全屋套餐','商家商品','外部工厂商品']
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10
				};
				if (this.type == 0) {
					data.type = this.type;
				}
				this.List = []
				this.$http(this.$ApiList.CartList, data).then(res => {
					this.List = res.datas.on_sale[0].goods_sku;
				});
			},
			stateType(type) {
				this.type = type;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.type = '';
				this.init()
			},
			setNum(num, cart_id) {
				if (num < 1 || num == '') {
					this.$layer.msg('请输入正确的数量');
					return;
				}
				let data = {
					cart_id: cart_id,
					num: num
				};
				this.$http(this.$ApiList.CartNum, data).then(res => {});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection);
			},
			delCart(cart_id) {
				let data = {
					cart_id: cart_id,
				};
				this.$http(this.$ApiList.CartDelete, data).then(res => {
					this.$layer.msg(res.datas);
				});
			},
			del() {
				let data;
				if (this.multipleSelection.length == 0) {
					return;
				}
				let cart_id = []
				this.multipleSelection.forEach(item => {
					cart_id.push(item.cart_id)
				});
			
				data = {
					cart_id: cart_id.join(',')
				};
				this.$http(this.$ApiList.CartDelete, data).then(res => {
					this.$layer.msg(res.datas);
				});
			},
		},
		created() {
			this.init();
		},
	};
</script>
<style lang="scss" scoped>
	.cart-list {
		.sign-export-view {
			display: flex;
			margin: 10px 0;
		}

		.sign-export-view p {
			flex: 1;
			text-align: right;
			line-height: 30px;
		}

	}
</style>
